<template>
    <el-row class="height100 box box-tb box-pack-start top">
        <div class="select box box-align-center box-pack-start mb10">
            <span class="mr10">学期</span>
            <el-select v-model="xqValue" placeholder="选择学期" @change="change" class="text">
                <el-option v-for="(item,index) in xqList" :key="index" :label="item.xn +`-`+item.xq"
                    :value="item.xn +`-`+item.xq"></el-option>
            </el-select>
        </div>
        <el-col class="box box-pack-between" style="height: calc(100% - 50px);">
            <el-col class="pub padd10" :span="8" style="overflow-y: auto;">
                <el-col class="box box-align-center box-pack-between">
                    <div>
                        <i class="icon-1"></i>
                        课程清单 {{qdList.length}}项
                    </div>
                </el-col>
                <el-col class="mt30">
                    <el-col v-if="qdList.length !=0">
                        <div class="lists padd20 box box-pack-between box-align-center mb10" v-for="(item,index) in qdList"
                            :key="index">
                            <span class="icon-2" v-if="item.type==`0`">服务劳动</span>
                            <span class="icon-2" v-if="item.type==`1`">日常生产劳动</span>
                            <span class="icon-2" v-if="item.type==`2`">生活劳动</span>
                            <div class="box box-align-center" style="width: 58%;box-sizing: border-box;">
                                <el-image class="img" style="width: 80px;height: 60px;min-width: 80px;" fit="cover"
                                    :src="item.img">
                                </el-image>
                                <div class="ml20 box box-tb box-align-start" style="width: 100%;">
                                    <h3 class="mb10">{{item.title}}</h3>
                                    <span>视频：1</span>
                                </div>
                            </div>
                            <el-button type="warning" icon="el-icon-plus" round size="mini" @click="handleAdd(item)">添加</el-button>
                        </div>
                    </el-col>
                    <el-col v-else>
                        暂无数据
                    </el-col>

                </el-col>
            </el-col>
            <el-col :span="15" class="no-auto box box-tb" style="overflow-y: auto;position: relative;">
                <el-col style="padding-bottom: 40px;">
                    <div class="user-list radio" v-if="qdTrList.length !=0">
                        <!-- <el-checkbox-group v-model="checkedSjs" @change="handleCheckedChange"> -->
                            <el-checkbox-group v-model="checkedSjs">
                            <el-checkbox v-for="(item,index) in qdTrList" :label="item.id" :key="index" disabled>
                                <div class="box box-tb">
                                    <div class="list box box-pack-between box-align-center mt10">
                                        <div class="left box box-tb box-align-start mt10">
                                            <span class="icon" v-if="item.type==`0`">服务劳动</span>
                                            <span class="icon" v-if="item.type==`1`">日常生产劳动</span>
                                            <span class="icon" v-if="item.type==`2`">生活劳动</span>
                                            <div class="box">
                                                <el-image class="img" fit="cover" :src="item.img">
                                                </el-image>
                                                <div class="box box-tb box-align-start box-pack-center ml10">
                                                    <h3>{{item.title}}</h3>
                                                    <div class="box box-pack-center box-align-center mt20">
                                                        <!-- <el-avatar :size="34"
                                                        :src="item.icon"></el-avatar> -->
                                                        <!-- <span class="ml10 mr30">{{item.createUser}}</span> -->
                                                        <span>视频数：1</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="right
                                         box box-tb box-pack-center">
                                            <el-button type="danger" icon="el-icon-plus" round size="small" @click="handleDelete(item)">移除</el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div v-else>暂无数据</div>
                </el-col>
                <!-- <el-col class="fixed box box-pack-between">
                    <el-checkbox v-model="isIndeterminate">已加入</el-checkbox>
                    <el-button type="primary" size="small">发布</el-button>
                </el-col> -->
            </el-col>

        </el-col>
    </el-row>

</template>

<script>
    export default {
        data() {
            return {
                loginInfo: this.$store.state.loginInfo,
                bjList: [],
                bj: 0,
                ldsjid: 0,
                sjList: [],
                tkzt: false,
                current: 0,
                xqList: [],
                qdList: [],
                xqValue: '',
                stuCnt: 0,
                checkedSjs: [],
                isIndeterminate: true,
                schoolid: this.$store.state.schoolId,
                qdTrList:[]
            };
        },
        mounted() {
            // this.notPlanLdsj()
        },
        methods: {
            change() {
                this.getSjData()
            },

            getXqData() {
                console.log(this.loginInfo);
                let url = "/comm/getXnxqList";
				let params = {
					schoolid:this.schoolid
				};
                this.$ajax.post(url,params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.xqList = res.xnxqList;
                        let a = res.xnxqList.map(resp => {
                            if (resp.isCur == 1) return resp
                        })
                        a.forEach(r => {
                            if (r != undefined) {
                                this.xqValue = r.xn + '-' + r.xq
                            }
                        })

                        this.getSjData()
                    }
                })
            },
            getSjData() {
                let url = '/ytrsjlist/ldqd';
                let params = {
                    schoolid: this.schoolid,
                    xn: this.xqValue.split('-')[0],
                    xq: this.xqValue.split('-')[1].split('（')[0],
                    userid:this.loginInfo.user.id
                };
                console.log(params);
                this.$ajax.post(url,params).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.qdList = res.ldqd_jyz;
                        this.qdTrList =res.ldqd_tr;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleClose() {
                this.$emit('clickClose')
            },
            onSubmit() {
                this.$emit('saveSjrw', this.checkedSjs);
                this.handleClose();
            },
            handleCheckedChange(value) {
                let checkedCount = value.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.ldkcList.length;
            },
            handleAdd(item){
                let url = '/ytrsjlist/pub';
                let params = {
                    ldsjids: item.id.toString(),
                    xn: this.xqValue.split('-')[0],
                    xq: this.xqValue.split('-')[1].split('（')[0],
                    userid:this.loginInfo.user.id
                };
                console.log(params);
                this.$ajax.post(url,params).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.$message.success('添加成功');
                        this.getSjData()
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleDelete(item){
                console.log(item);
                let url = '/ytrsjlist/cancelpub';
                let params = {
                    id: item.sjlistid,
                };
                console.log(params);
                this.$ajax.post(url,params).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.$message.success('移除成功');
                        this.getSjData()
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .top{
        padding: 20px;
        background-color: #fff;
    }
    .pub::-webkit-scrollbar {
        width: 0px;
    }

    .no-auto::-webkit-scrollbar {
        width: 0px;
    }


    .fixed {
        position: fixed;
        bottom: 20px;
        width: 50%;
        height: 40px;
        // width: 100%;
        background-color: #f7f9fd;
    }

    .list {
        position: relative;
        padding: 20px;
        height: 80px;
        background: #fff;
        border: 1px solid #E0DEF6;
        border-radius: 7px;
        overflow: hidden;

        .icon {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 114px;
            height: 22px;
            background: #FFF5D9;
            color: #FFA758;
            font-size: 15px;
            border-radius: 7px 0px 0px 0px;
        }

        h3 {
            font-size: 18px;
        }
    }

    .lists {
        box-sizing: border-box;
        position: relative;
        background: #F8F9FC;
        border: 1px solid #ccc;
        border-radius: 6px;

        h3 {
            width: 76%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .icon-2 {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 114px;
            height: 22px;
            background: #FFF5D9;
            color: #FFA758;
            font-size: 15px;
            border-radius: 7px 0px 0px 0px;
        }
    }

    .pub {
        border: 1px solid #E0DEF6;
        border-radius: 12px;
    }

    .lists.active {
        color: #fff;
        background: #7686F5;
    }

    .maxwidth {
        max-width: 1400px;
        margin: 20px auto !important;
    }

    /deep/ .el-image.img {
        border-radius: 5px;
        width: 120px;
        height: 80px;
    }

    .user-list {
        height: 100%;

        .checkbox__label {
            width: 80%;
        }
    }


    //单选
    .user-list>>>.el-checkbox__label {
        .list {
            display: flex;
            color: #000000;
        }
    }

    .user-list>>>.el-checkbox__input {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #626BF1;
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-checkbox__input.ischecked .el-checkbox__label .list {
        border: 1px solid #6670FF;
    }

    /deep/ .el-checkbox.is-checked .list {
        border: 1px solid #6670FF;
    }

    /deep/ .el-checkbox__label {
        width: 100%;
    }

    /deep/ .el-checkbox:last-of-type {
        margin-right: 30px;
    }
</style>
